{include file="public/head"/}
<style>
	/* 打开宽度限制 */
	.popover {
		max-width: 90vw;
	}
</style>
<div class="container-fluid" id="arrival">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<div class="alert alert-dismissable alert-info" id="headeralert">
				<button type="button" class="close">×</button>
				<p></p>
			</div>
		</div>
	</div>
    <div class="ntDesktop">
        <div class="ntDesktop-head">收货入库</div>
		<div class="row">
			<div class="col-md-8 text-right">
				<ul class="nav nav-tabs">
					<li class="active" @click="changestatus(3)"><a href="#store_order" data-toggle="tab">调货单</a></li>
					<li @click="changestatus(4)"><a href="#store_order_log" data-toggle="tab">收货记录</a></li>
				</ul>
			</div>
			<div class="col-md-4 text-right">
				<div class="input-group">
					<input type="text" class="form-control" @keyup.13="render" v-model="dname" placeholder="调货单号">
					<span class="input-group-btn">
						<button class="btn btn-primary" @click="render">
							<span class="fa fa-search"></span> 查找
						</button> 
					</span>
				</div>
			</div>
		</div>
   
        <div class="row">
            <div class="col-md-12">
				<div class="tab-content">
					<div class="tab-pane" id="store_order_log">
					<table class="table table-striped table-hover ntTable">
						<thead>
							<tr>
								<th>调货单</th>
								<th class="sorting"> 调货 </th>
								<th width="30%"> 产品 </th>
								<th> 箱规 </th>
								<th> 数量 </th>
								<th> 签收 </th>
								<th> 操作 </th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in listtwo">
								<td><span v-if="item.store_order_id">{{formatUnit(item.store_order_id,'ID')}}</span></td>
								<td><span v-if="item.store_order_id">{{item.takeout_name}}</span> <br><small v-if="item.store_order_id">{{item.takeout_date}}</small></td>
								<td>
									<div class="pro">
										<div class="pro-icon"><img :src="item.prodata.img_url" border="0" width="48px" height="48px" alt=""></div>
										<div class="pro-name">
											<small> {{formatUnit(item.prodata.prochar_id,'ID') + (item.prodata.brand_name ? ' / '+item.prodata.brand_name :'')+ (item.prodata.model ? ' / '+item.prodata.model :'')}}
											</small>
											<br>
											{{item.prodata.pro_name}}
										</div>
									</div>
								</td>
								<td align="right">
									{{item.prodata.prochar_qty}}<small class="unit">PCS/CTN</small><br>
									{{item.prodata.ctn_size}}<small class="unit">CM</small>
								</td>
								<td align="right">
									{{item.qty}}<small class="unit">PCS</small><br>
									{{formatUnit(item.qty/item.prodata.prochar_qty,'CTN')}}<small class="unit">CTN</small>
								</td>
								<td><span v-if="item.store_order_id">{{item.received_name}}</span> <br><small v-if="item.store_order_id">{{item.received_date}}</small></td>
								<td align="right">
									{in name="387" value="$Think.session.admin.auth_ids"}
									<a v-if="item.store_order_id" :href="'/admin/warehouses/transdetail?id='+item.store_order_id+'&warehouse_id='+item.source_id" class='btn btn-sm btn-default'
									   data-toggle="modal" data-target="#order_viewModal">查看</a>
									{/in}
									{in name="391" value="$Think.session.admin.auth_ids"}
									<button v-if="item.store_order_id" class="btn btn-sm btn-default" @click="revoke(item.store_order_id)">撤消</button>
									{/in}
								</td>
							</tr>
							<tr style="text-align: center;" v-if="listtwo.length==0">
								<td colspan="7" class="no_date">{:lang('no_data')}</td>
							</tr>
						</tbody>
					</table>
						<ul class="pagination" id="paginationtwo" v-show="listtwo.length!=0">
						</ul>
				</div>
                <div class="tab-pane active" id="store_order">
					<table class="table table-striped table-hover ntTable">
						<thead>
							<tr>
								<th>单号</th>
								<th>发货仓</th>
								<th>收货仓</th>
								<th>取货人</th>
								<th>产品数量</th>
								<th>箱数</th>
								<th>体积</th>
								<th>重量</th>
								<th>打印</th>
								<th>已收货</th>
								<th>创建</th>
								<th>编辑</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
						<tr v-for="(item,index) in listone">
							<td>{{formatUnit(item.id,'ID')}}</td>
							<td>{{item.source_name}}</td>
							<td>{{item.warehouse_name}}</td>
							<td>{{item.take_name}}</td>
							<td align="right">{{item.pronum}}<small class="unit">PRO</small></td>
							<td align="right">{{formatUnit(item.ctnnum,'CTN')}}<small class="unit">CTN</small></td>
							<td align="right">{{formatUnit(item.m3num,'CBM')}}<small class="unit">CBM</small></td>
							<td align="right">{{formatUnit(item.kgsnum,'KGS')}}<small class="unit">KGS</small></td>
							<td>{{item.print_name}}<br><small>{{item.print_date}}</small></td>
							<td>{{item.receive_name}}<br><small>{{item.receive_date}}</small></td>
							<td>{{item.create_name}}<br><small>{{item.create_date}}</small></td>
							<td>{{item.update_name}}<br><small>{{item.update_date}}</small></td>
							<td align="right">
								{in name="387" value="$Think.session.admin.auth_ids"}
								<a :href="'/admin/warehouses/transdetail?id='+item.id+'&warehouse_id='+item.source_id" class='btn btn-sm btn-default'
								   data-toggle="modal" data-target="#order_viewModal">查看</a>
								{/in}

								{in name="390" value="$Think.session.admin.auth_ids"}
								<button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#order_arrivalModal" @click="arrival(item.id)">确认收到</button>
								{/in}
							</td>
						</tr>
						<tr style="text-align: center;" v-if="listone.length==0">
							<td colspan="13" class="no_date">{:lang('no_data')}</td>
						</tr>
						</tbody>
					</table>
					<ul class="pagination" id="paginationone" v-show="listone.length!=0">
					</ul>
				</div>
				</div>
            </div>
        </div>
	</div>
	<!-- 调货单 详情页 -->
	<div class="modal fade" id="order_viewModal" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width:80vw">
			<div class="modal-content">
			</div>
		</div>
	</div>
	<!-- 调货单生成 详情页 -->
	<div class="modal fade" id="order_arrivalModal" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width:80vw">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" >调货单收货确认</h4>
				</div>
				<div class="modal-body">
					<div class="row clearfix">
						<div class="col-md-12 column">
							<div class="alert alert-dismissable alert-info">
								<button type="button" class="close">×</button>
								<p></p>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<div class="panel panel-default">
								<div class="panel-body">
									<div class="col-md-2">
										<small class="gray">发货仓</small><br>
										{{topdatas.source_name}}<br>
									</div>
									<div class="col-md-2">
										<small class="gray">发货人</small><br>
										{{topdatas.store_ordername}}<br>
										<small>{{topdatas.store_orderdate}}</small>
									</div>
									<div class="col-md-2">
										<small class="gray">收货仓</small><br>
										{{topdatas.warehouse_name}}<br>
									</div>
									<div class="col-md-2">
										<small class="gray">取货人</small><br>
										{{topdatas.take_name}}
									</div>
									<div class="col-md-2">
										<small class="gray">打印</small><br>
										{{topdatas.print_name}}<br><small>{{topdatas.print_date}}</small>
									</div>
									<div class="col-md-2">
										<small class="gray">收货确认</small><br>
										{{topdatas.receive_name}}<br><small>{{topdatas.receive_date}}</small>
									</div>
								</div>
								<table class="table table-striped ntTable">
									<thead>
									<tr>
										<th>#</th>
										<th>产品</th>
										<th>箱规</th>
										<th>数量</th>
										<th>库存</th>
										<th>位置</th>
									</tr>
									</thead>
									<tbody>
									<tr v-for="(item,index) in prodatas">
										<td align="center">{{index+1}}</td>
										<td>
											<div class="pro">
												<div class="pro-icon"><img :src="item.prodata.img_url" border="0" width="48px" height="48px" alt=""></div>
												<div class="pro-name">
													<small> {{formatUnit(item.prodata.prochar_id,'ID') + (item.prodata.brand_name ? ' / '+item.prodata.brand_name :'')+ (item.prodata.model ? ' / '+item.prodata.model :'')}}
													</small>
													<br>
													{{item.prodata.pro_name}}
												</div>
											</div>
										</td>
										<td align="right">
											{{item.prodata.prochar_qty}}<small class="unit">PCS/CTN</small><br>
											{{item.prodata.ctn_size}}<small class="unit">CM</small>
										</td>
										<td align="right">
											{{item.qty}}<small class="unit">PCS</small><br>
											{{formatUnit(item.qty/item.prodata.prochar_qty,'CTN')}}<small class="unit">CTN</small>
										</td>
										<td align="center">
											<button class="btn btn-sm btn-default" data-toggle="popover" title="库存" @mouseover="setpopper">
												库存
												<div class="content" style="display: none;">
													<div style="width:25vw">
														<table class="table">
															<tbody>
															<tr v-for="prostore in item.prostore">
																<td>{{prostore.place_name}}</td>
																<td align="right">{{prostore.qty}}<small class="unit">PCS</small></td>
																<td align="right">{{formatUnit(prostore.qty/item.prodata.prochar_qty,'CTN')}}<small class="unit">CTN</small></td>
															</tr>
															</tbody>
															<tfoot>
															<tr>
																<td>合计</td>
																<td align="right">{{item.countqty}}<small class="unit">PCS</small></td>
																<td align="right">{{formatUnit(item.countqty/item.prodata.prochar_qty,'CTN')}}<small class="unit">CTN</small></td>
															</tr>
															</tfoot>
														</table>
													</div>
												</div>
											</button>
										</td>
										<td>
											<select name="" class="form-control" v-model="item.place_id">
												<option value="">{:lang('please_select')}</option>
												<option :value="placedata.id" v-for="placedata in item.place_data">
													{{placedata.name}}
												</option>
											</select>
										</td>
									</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">
						<span class="glyphicon glyphicon-remove"></span>取消
					</button>
					<button type="button" class="btn btn-primary" :disabled="isdisadble"@click="savebtn">
						<span class="fa fa-check"></span> 产品确认入库完成
					</button>
				</div>
			</div>
		</div>
	</div>
</div>

<!--添加弹窗部分 开始-->



<!--弹窗部分 结束-->
{include file="public/foot"/}
<script>
    var table = new Vue({
        el: '#arrival',
        data: {
            status:3,
            listone:[],
            listtwo:[],
            page: 1,
            pageSize: 30,
            topdatas:{},
            prodatas:[],
            dname:'',
            isdisadble:false,
        },
        methods: {
            formatUnit: formatUnit,
            render(){
                this.getAllList();
			},
            //分页
            setPage(pageCurrent, pageSum,pagination) {
                //数据总条数
                var myPageCount = pageSum;
                //一页显示多少条
                var myPageSize = this.pageSize;
                //总页数
                var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
                $.jqPaginator(pagination, {
                    totalPages: parseInt(countindex),
                    //最多显示多少页
                    visiblePages: 5,
                    //默认显示第几页
                    currentPage: pageCurrent,
                    first: '<li class="first"><a href="javascript:;">' + langcon.page_home + '</a></li>',
                    prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>' + langcon.previous_page + '</a></li>',
                    next: '<li class="next"><a href="javascript:;">' + langcon.next_page + '<i class="arrow arrow3"></i></a></li>',
                    last: '<li class="last"><a href="javascript:;">' + langcon.last_page + '</a></li>',
                    page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                    all: '<li class="page"><a href="javascript:;">' + myPageCount + ' / ' + this.page + 'PG , ' + this.pageSize + ' /PG</a></li>',
                    onPageChange: (num, type) => {
                        if (type == "change") {
                            this.page = num
                            this.getAllList()
                        }
                    }
                });
            },
            getAllList(){
                $('.loding').show()
                $.ajax({
                    url: "/admin/warehouses/warehousearrival",
                    type: 'post',
                    data: {
                        status:this.status,
                        page: this.page,//分页
                        pageSize: this.pageSize,//条数
                        getdata: '',//获取的标志
                        dname:this.dname,//search
                    },
                    dataType: "json",
                    success: (result) => {
                        let pagination = '';
                        if (this.status == 3) {
                            this.listone = result.data;
                            pagination = '#paginationone';
                            this.allkeys=result.keys
                        } else if (this.status == 4) {
                            let arr = [];
                            result.data.forEach(item => {
                                let index = $.inArray(item.store_order_id, arr);
                                if (index >= 0) {
                                    item.store_order_id = '';
                                }
                                arr.push(item.store_order_id);
                            })
                            this.listtwo = result.data;
                            pagination = '#paginationtwo';
                        }
                        if (result.count){
                            this.setPage(parseInt(this.page), result.count, pagination)
                        }
                        $('.loding').hide()
                    }
                })
            },
            setpopper(e){
                $(e.target).popover({
                    trigger: 'hover focus manual',
                    placement: ($(e.target).attr("placement") == undefined) ? 'left' : $(e.target).attr("placement"),
                    //placement:'left',
                    title: $(e.target).attr("title"),
                    html: 'true',
                    content: $(e.target).find(".content").html(),
                    animation: false
                });
            },
            changestatus(code){
                this.status=code;
                this.getAllList();
            },
            //保存
            savebtn(){
                this.isdisadble=true;
				$.ajax({
					url: "/admin/warehouses/arrivalorder",
					type: 'post',
					data: {
						prodatas:this.prodatas,//获取要调货的位置id
						savedata:'',
						id:this.topdatas.id,
					},
					dataType: "json",
					success: (result) => {
						if (result.status != 1) {
							change_mes_type('.modal-body .alert',result.status)
							$('.modal-body .alert').show()
							$('.modal-body .alert p').html('*'+result.msg+'<br>')
						} else {
							change_mes_type('#headeralert',result.status)
							$('#headeralert').show()
							$('#headeralert p').html('*'+result.msg+'<br>')
							$('#order_arrivalModal').modal('toggle')
							this.getAllList()
						}
                        this.isdisadble=false;
					}
				})
            },
			//确认收到
            arrival(id){
                $.ajax({
                    url: "/admin/warehouses/arrivalorder",
                    type: 'post',
                    data: {
                        id,
                        getdata:'',
                    },
                    dataType: "json",
                    success: (result) => {
                        this.topdatas=result.topdata;
                        this.prodatas=result.prodata;
                    }
                })
			},
			//收货入库的撤消
            revoke(id){
                $.ajax({
                    url: "/admin/warehouses/annulorder",
                    type: 'post',
                    data: {
                        id,
                    },
                    dataType: "json",
                    success: (res) => {
                        change_mes_type('#headeralert',res.status)
                        $('#headeralert').show()
                        $('#headeralert p').html('*' + res.msg + '<br>');
                        if(!(this.listtwo.length - 1)){
                            if(this.page>1){
                                this.page--
                            }
                        }
                        this.getAllList()
                    }
                })
            }
        },
        mounted(){
            this.getAllList();
        }
    })
</script>